<template>
	<div>
		<p class="text-left">{{ label }}</p>
		<div class="chart-box background-white">
			<div class="flex justify-between align-center p-t-15 p-r-20 p-l-20">
				<div class="flex justify-between align-center">
					<TextWithValue label="已使用" value="89.9GHZ" />
					<TextWithValue class="m-l-15" label="总容量" value="517.3GHZ" />
				</div>
				<ChartTime :value.sync="timeType" />
			</div>
			<div class="chart-container" id="chartBox">
				<ELine :chart-data="chartData" :key="updateKey" />
			</div>
		</div>
	</div>
</template>

<script>
import TextWithValue from './TextWithValue'
import ChartTime from './ChartTime'
import ELine from '../views/Charts/EchartComp/ELine'
export default {
	name: 'LineChartWithLabel',
	components: {
		TextWithValue,
		ChartTime,
		ELine,
	},
	props: {
		label: {
			type: String,
			default: '图标标签',
		},
	},
	data() {
		return {
			// chartData: [150, 230, 224, 218, 135, 147, 260],
			timeType: 1,
			updateKey: +new Date().getTime(),
		}
	},
	watch: {
		timeType: {
			handler() {
				this.getData()
			},
		},
	},
	created() {
		this.getData()
	},
	methods: {
		getData() {
			const arr = []
			for (let i = 0; i < 7; i++) {
				// 时间x轴
				const temp = []
				if (i === 0) {
					temp.push('x轴')
				} else {
					temp.push(`周${i}`)
				}
				for (let j = 0; j < 6; j++) {
					if (i === 0) {
						temp.push(`类目${j}`)
					} else {
						temp.push(Math.ceil(Math.random() * 300))
					}
				}
				arr.push(temp)
			}
			this.chartData = arr
			this.updateKey = +new Date().getTime()
		},
	},
}
</script>

<style lang="scss" scoped>
.chart-box {
	height: 400px;
	.chart-container {
		height: calc(100% - 40px);
	}
}
</style>
